<template>
  <el-select v-model="selectedValue" @change="handleChange" style="width:100%;">
    <!-- <el-select v-model="selectValue" style="width:100%;"> -->
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      style="width:100%;"
    ></el-option>
  </el-select>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";
import { categoryType, failDataType } from "CustomTypes";
import { concat, isEqual, isUndefined } from "lodash";
import { addCategorys, updateCategorys } from "@/apis/Category";
import { getReqDataNew } from "@/utils/http";
import { MessageBox } from "element-ui";

@Component({ name: "MySelector" })
export default class MySelector extends Vue {
  @Prop()
  private _id!: string;
  @Prop()
  private options!: any;
  @Prop()
  private value!: number;

  private _value?: number;
  set selectedValue(value: any) {
    this._value = value;
  }

  get selectedValue() {
    return this.value;
  }

  @Emit("update:selectedValue")
  handleChange(e: any) {
    return { status: this._value, _id: this._id };
  }

  @Watch("selectedValue")
  valueHistory(newValue: string, oldValue: string) {
    return;
  }
}
</script>
